import React, { useEffect } from 'react';
import { Text, View } from 'native-base';
import AdditionalFormLocation from './AdditionalFormLocation.tsx';
import AdditionalFormInput from './AdditionalFormInput.tsx';
import AdditionalFormPicker from './AdditionalFormPicker.tsx';
import AdditionalFormRadioGroup from './AdditionalFormRadioGroup.tsx';
import AdditionalFormRecord from './AdditionalFormRecord.tsx';
import AdditionalFormDateTime from './AdditionalFormDateTime.tsx';
import UploadMedia from '../../../../component/UploadMedia.tsx';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import { MediaType } from 'react-native-image-picker/src/types.ts';
import Tools from '../../../../utils/Tools.ts';
import { it } from '@jest/globals';

export interface IAdditionalFormProps {
  formList: IGoodsAdditionalInfo[];
  edit?: boolean;
  onChange: (data: IGoodsAdditionalInfo) => void;
}

const AdditionalForm: React.FC<IAdditionalFormProps> = ({ formList, edit, onChange }) => {
  // 渲染媒体选择
  const renderImageOrVideoSelection = (item: IGoodsAdditionalInfo, type: MediaType) => {
    return (
      <>
        <View py={4}>
          <View mb={2}>
            {item.requiredFlag && !edit && (
              <Text marginRight={1} color={CommonStyle.price}>
                *
              </Text>
            )}
            <Text marginRight={2} fontSize={12}>
              {item.attrName}
            </Text>
          </View>
          <UploadMedia mediaType={type} onChange={async (fileUri) => onChange({ ...item, value: await Tools.convertFileToBase64(fileUri) })} />
        </View>
      </>
    );
  };

  const renderRoot = (item: IGoodsAdditionalInfo) => {
    switch (item.fieldType) {
      case 1:
        return <AdditionalFormInput item={item} edit={edit} defaultValue={item.value} onChange={(value) => onChange({ ...item, value })} />;
      case 2:
        return <AdditionalFormPicker item={item} edit={edit} onChange={(value) => onChange({ ...item, value })} />;
      case 3:
        return <AdditionalFormDateTime item={item} edit={edit} onChange={(value) => onChange({ ...item, value })} />;
      case 4:
        return renderImageOrVideoSelection(item, 'photo');
      case 5:
        return renderImageOrVideoSelection(item, 'video');
      case 6:
        return <AdditionalFormRadioGroup item={item} edit={edit} onChange={(value) => onChange({ ...item, value })} />;
      case 7:
        return <AdditionalFormLocation item={item} edit={edit} onChange={(value) => onChange({ ...item, value })} />;
      case 8:
        return <AdditionalFormRecord item={item} edit={edit} onChange={(value) => onChange({ ...item, value })} />;
    }
  };
  return (
    <React.Fragment>
      {formList.map((item, index) => {
        return <React.Fragment key={index}>{renderRoot(item)}</React.Fragment>;
      })}
    </React.Fragment>
  );
};

export default AdditionalForm;
